import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { InfiniteScroll, List } from 'antd-mobile'
import '../Catelist/Catelist.scss'
import service from '../../api'
class Catelist extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Catelist: [],
            count: 1,
            hasMore: true
        }
    }
    loadMore = async () => {
        var loadres = await service.pro.pro_recommendlist({ count: this.state.count, limitNum: 12 })
        this.setState({
            count: this.state.count + 1,
            Catelist: [...this.state.Catelist, ...loadres.data.data],
            hasMore: loadres.data.data.length > 0
        })
    }

    todetail(proid) {
        //地址中不能出现无意义的空格，否则会转为%
        this.props.history.push('/detail/' + proid)
    }
    async componentDidMount() {
        var res = await service.pro.pro_recommendlist()
        // console.log(res.data.data);
        this.setState({ Catelist: res.data.data })
    }
    render() {
        return (
            <div className='catelist'>
                <List>
                    {
                        this.state.Catelist.map((item, index) => {
                            return (
                                <div className="list" key={index} onClick={() => { this.todetail(item.proid) }}>
                                    <img src={item.img3} alt="" />
                                    <div className="name">{item.proname}</div>
                                    <div className="price">￥{item.originprice}</div>
                                </div>
                            )
                        })
                    }
                </List>
                <InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore}/>

            </div>
        );
    }
}

export default withRouter(Catelist);